// * Table组件
<template>
  <table>
    <thead>
      <th v-for="(col, index) of columns" :key="`th-${index}`">
        {{ col.title }}
      </th>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) of data" :key="`tr-${rowIndex}`">
        <td v-for="(col, index) of columns" :key="`td-${index}`">
          <template v-if="'render' in col">
            <Render
              :row="row"
              :index="rowIndex"
              :column="col"
              :render="col.render"
            />
          </template>
          <template v-else-if="'slot' in col">
            <SlotRender :row="row" :index="rowIndex" :column="col" />
          </template>
          <template v-else>{{ row[col.key] }}</template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import Render from './render.js'
import SlotRender from './slot.js'

const prefixCls = 's-table'

export default {
  name: 'Table',

  provide() {
    return {
      tableRoot: this,
    }
  },

  components: { Render, SlotRender },

  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      prefixCls: prefixCls,
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {},
}
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e9e9e9;
}
table th {
  background: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
  white-space: nowrap;
}
table td,
table th {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
</style>
